<template>
  <div class="my" v-if="Object.keys(this.user).length != 0">
    <module-open>
      <p slot="title">我的档案</p>
      <div slot="content">
        <div class="contentItem">
          <p>基本信息</p>
          <ul>
            <li>
              江湖人称：<span>{{ user.nickname }}</span>
            </li>
            <li>
              所居地区：<span>{{ user.address }}</span>
            </li>
            <li>
              诞生之日：<span>{{ user.birthday }}</span>
            </li>
            <li>
              我的学历：<span>{{ user.education }}</span>
            </li>
            <li>
              心之所想：<span>{{ user.target }}</span>
            </li>
            <li>
              兴趣：<span>{{ user.love.join(",") }}</span>
            </li>
          </ul>
        </div>

        <div class="contentItem">
          <p>联系方式</p>
          <ul>
            <li>
              qq：<span>{{ user.qq }}</span>
            </li>
            <li>
              微信：<span>{{ user.wechat }}</span>
            </li>
            <li>
              blog：<span>{{ user.blog }}</span>
            </li>
          </ul>
        </div>
        <p class="go">待更新</p>
      </div>
    </module-open>
  </div>
</template>

<script>
import moduleOpen from "./moduleOpen.vue";
import getUserData from "netWork/getUserData";
export default {
  components: { moduleOpen },
  name: "my",
  data() {
    return {
      user: {},
    };
  },
  created() {
    getUserData().then((res) => {
      this.user = res.data;
      this.user.love = JSON.parse(this.user.love);
    });
  },
};
</script>

<style scoped>
.my {
    font-size: 17px;
  font-weight: 700;
  box-sizing: border-box;
  padding: 0 20px;
  padding-top: 20px;
}
.go {
  padding-bottom: 50px;
}
.contentItem {
  color: #333333;
  margin-bottom: 40px;
}
.contentItem p {
  margin: 20px 0;
}
.contentItem li {
  letter-spacing:3px;
  list-style: disc;
  margin: 10px 0;
  margin-left: 15px;
}
.contentItem li span {
  font-weight: 300;
  color: skyblue;
}
</style>